;define(function (require) {
	'use strict';
	var d3=require('d3');
	var $=require('jquery');
	var logs=require('plugin/logs');

	var π = Math.PI,
    	τ = 2 * π;

	function dashboard(id){
		this.id=id;
		this.w=0;
		this.h=0;
		this.svg=null;
		this.opts={
			lc:'#D6DFEF',
			bc:'#EBF4FA',
			ac:'#427EC9',
			sc:'#6A9AD7',
			ec:'#A1D2F0',
			ibg:'',
			value:17.6,
			textStartValue:0,
			textSize:1,
			textColor:'#666666',
			textVertPosition:0.7,
			percentText:'%',
			fixed:0,
			waveAnimateTime:2000,
			waveHeight:0.3,
    	waveCount:1,
    	valueCountUp:true,
    	
    };
	}
	dashboard.prototype={
		init:function(opts){
			logs.log('success.');
			if(!!opts)
				$.extend(true, this.opts, opts);

			this.w=$(this.id).width();
			this.h=$(this.id).height();
			this.r=this.w/2;
			this.textPixels = (this.opts.textSize*this.r/2.5);
			this.fillCircleRadius=this.r*0.5;

			this.svg = d3.select(this.id)     //选择文档中的body元素
		    .append("svg")          //添加一个svg元素
		    .attr("width", this.w)       //设定宽度
		    .attr("height", this.h);

		  this.drawOuterLine();
		  this.drawbg();
		  this.drawBoard();
		  this.drawText();
		},
		drawOuterLine:function(){
			var that=this;
			var outerRadius = this.r-1,
    			innerRadius = outerRadius - 1,
    			n=1,
    			width=this.w,
    			height=this.w;
    	this.svg.append("g")
	    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	  	.selectAll("path")
	    .data(d3.range(0, τ, τ / n))
	  	.enter().append("path")
	    .attr("d", d3.svg.arc()
	        .outerRadius(outerRadius)
	        .innerRadius(innerRadius)
	        .startAngle(0)
	        .endAngle(360))
	    .style("fill", function(d) { return d3.rgb(that.opts.lc); });
	    //d3.hsl(d * 360 / τ, 1, .5)
		},
		drawbg:function(){
			var that=this;
			var outerRadius = this.r - this.r*0.1,
    			innerRadius = outerRadius - this.r*0.22,
    			n=1,
    			width=this.w,
    			height=this.w;
    	this.svg.append("g")
	    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	  	.selectAll("path")
	    .data(d3.range(0, τ, τ / n))
	  	.enter().append("path")
	    .attr("d", d3.svg.arc()
	        .outerRadius(outerRadius)
	        .innerRadius(innerRadius)
	        .startAngle(function(d) { return d; })
	        .endAngle(function(d) { return d + τ / n * 1.1; }))
	    .style("fill", function(d) { return d3.rgb(that.opts.lc); });
		},
		drawBoard:function(){
			var that=this;
			var outerRadius = this.r - this.r*0.32,
    			innerRadius = outerRadius - this.r*0.12,
    			n=1,
    			width=this.w,
    			height=this.w;
    	var defs = this.svg.append("defs");
    	var linearGradient = defs.append("linearGradient")
						.attr("id","linearColor")
						.attr("x1","0%")
						.attr("y1","100%")
						.attr("x2","100%")
						.attr("y2","0%");
			var stop1 = linearGradient.append("stop")
							.attr("offset","0%")
							.style("stop-color",this.opts.sc);

			var stop2 = linearGradient.append("stop")
							.attr("offset","100%")
							.style("stop-color",this.opts.ec);

    	this.svg.append("g")
	    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	  	.selectAll("path")
	    .data(d3.range(0, τ, τ / n))
	  	.enter().append("path")
	    .attr("d", d3.svg.arc()
	        .outerRadius(outerRadius)
	        .innerRadius(innerRadius)
	        .startAngle(function(d) { return d; })
	        .endAngle(function(d) { return d + τ / n * 1.1; }))
	    .style("fill", "url('#linearColor')");
	  },
	  drawText:function(){
	  	var textRiseScaleY=d3.scale.linear()
        	.range([this.r*2,this.textPixels*1.3])
        	.domain([0,1]);

	  	var text = this.svg.append("text")
        .text(this.textRounder(this.opts.textStartValue) + this.opts.percentText)
        .attr("class", "liquidFillGaugeText")
        .attr("text-anchor", "middle")
        .attr("font-size", this.textPixels + "px")
        .style("fill", this.opts.textColor)
        .attr('transform','translate('+this.r+','+textRiseScaleY(this.opts.textVertPosition)+')');

	  },
	  textRounder:function(value){
	    if(this.opts.fixed>0){
	    	return parseFloat(value).toFixed(this.opts.fixed);
	    }
	  	return Math.round(value);
	  },
	  drawWave:function(){
	  	var clipArea = d3.svg.area()
        .x(function(d) { return waveScaleX(d.x); } )
        .y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*this.opts.waveOffset*-1 + Math.PI*2*(1-this.opts.waveCount) + d.y*2*Math.PI));} )
        .y1(function(d) { return (this.fillCircleRadius*2 + 10); } );
	    var waveGroup = d3.svg.append("defs")
	        .append("clipPath")
	        .attr("id", "clipWave");
	    var wave = waveGroup.append("path")
	        .datum(data)
	        .attr("d", clipArea)
	        .attr("T", 0);
	    var fillCircleGroup = this.svg.append("g")
        .attr("clip-path", "url(#clipWave)");
    	fillCircleGroup.append("circle")
        .attr("cx", radius)
        .attr("cy", radius)
        .attr("r", fillCircleRadius)
        .style("fill", config.waveColor);
	  }
	};
	return dashboard;
});